<template>
  <div>
    <div class="mid">

        <div class="box_subject" > 
          <br>
          <h1>请选择学习科目</h1>
          <br>
      <b-button  style="background-color:blue; color: white" @click="go()" class="bu"
        >计算机网络</b-button>
      <b-button  style="background-color:grey" @click="go1()" class="bu"
        >计算机组成原理</b-button>
      <b-button style="background-color:grey" @click="go1()" class="bu"
        >数据结构</b-button>
      <b-button style="background-color:grey" @click="go1()" class="bu"
        >数据库应用管理</b-button >
        </div>
       </div>
     <footer class="footer" style="background-color: #404040a0;position:absolute">
      <div class="content has-text-centered">
        Made by DHU-CST.网络工程2018级专业实习. Copyright © 2021
      </div>
    </footer>
    </div>

</template>

<script>
export default {
  methods: {
    go() {
      this.$router.push("/home");
    },
    go1() {
      this.$buefy.dialog.alert("页面建设中");
    },
  },
};
</script>

<style>
.mid {

    background: url("../assets/WallPaper.jpeg") no-repeat;
  background-size: cover;
  min-height: calc(100vh);
  overflow: hidden;
}
.bu {
  margin: 0px 5% 0px 5%;
}
.box_subject {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 150px;
    transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(255, 255, 255, 0.507);
  border-radius: 10px;
}
</style>
